import { useEffect, useState } from "react"
import { GetQuestionBanks } from "../../api/exam"
import "../../css/examIndex.css"
import { Table, Tag, Space, Button } from "antd"

const ExamIndex = () => {
    const [tableData, setTableData] = useState([])

    useEffect(() => {
        const bindData = async () => {
            const res = await GetQuestionBanks();
            console.log(res.data.data);
            if (res.result === 0) {
                res.data.data.map((d, i) => d.key = i)
                setTableData(res.data.data);
            }
        }
        bindData();
    }, [])


    const columns = [
        {
            title: '题库',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '题目数',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '难度',
            dataIndex: 'lv',
            key: 'lv',
            render: (text, record) => (
                <span>{text <= 3 && <Tag color="magenta">{text}</Tag>}</span>
            )
        },

        {
            title: '标签',
            dataIndex: 'labels',
            key: 'labels',
        },
        {
            title: '发布',
            dataIndex: 'isPublish',
            key: 'isPublish',
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            key: 'isBan',
        },
        {
            title: '操作',
            dataIndex: 'actions',
            key: 'actions',
            render: (text, record) => (
                <div>
                    <Button danger style={{}}>
                        Primary
                    </Button>
                </div>
            )
        }
    ];

    return (
        <div className="examIndexContainer" >
            <div className="top">

            </div>
            <div className="dataTable">
                <Table dataSource={tableData} columns={columns} scroll={{ y: "350px" }} />
            </div>
        </div>
    )
}

export default ExamIndex